<template>
  <div class="settings-page">
    <!-- 主内容区域 -->
    <div class="settings-container">
      <div style="text-align: left;">
        <router-link to="/home"><el-i class="fas fa-home" style="color: black;"></el-i></router-link>
      </div>
      <div class="settings-content">
        <el-card class="settings-card">
          <template #header>
            <div class="card-header">账号管理</div>
          </template>
          <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
            <el-form-item label="用户名" prop="UserName">
              <el-input v-model="form.UserName" required placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="账号" prop="UserAccount">
              <el-input v-model="form.UserAccount" required placeholder="请输入账号"></el-input>
            </el-form-item>
            <el-form-item label="用户手机号" prop="UserPhone">
              <el-input v-model="form.UserPhone" placeholder="请输入手机号"></el-input>
            </el-form-item>

            <el-form-item label="密码" prop="UserPassword">
              <el-input v-model="form.UserPassword" type="password" placeholder="请输入密码"></el-input>
            </el-form-item>

          </el-form>
        </el-card>



        <!-- 提交按钮 -->
        <div class="submit-button">
          <el-button type="primary" @click="submitForm">提交</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useUserStore } from '../store/useUserstore';
import instance from '../api/server';
import { ElMessage } from 'element-plus'; // 引入 ElMessage

// 用户信息
const UserDetail = useUserStore(); // Vue Pinia 的用户存储
const form = ref({
  UserName: UserDetail.userInfo?.UserName || '',
  UserAccount: UserDetail.userInfo?.UserAccount || '',// 默认取用户的用户名
  UserPhone: UserDetail.userInfo?.UserPhone || '', // 默认取用户的手机号
  UserPassword: '', // 密码
});

// 校验规则
const rules = {
  UserName: [
    { required: true, message: '用户名不能为空', trigger: 'blur' },
    { min: 2, max: 20, message: '用户名长度为2-20个字符', trigger: 'blur' },
  ],

  UserPhone: [
    {
      required: true,
      message: '手机号不能为空',
      trigger: 'blur',
    },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: '请输入正确的手机号',
      trigger: 'blur',
    },
  ],
  UserPassword: [
    { required: true, message: '密码不能为空', trigger: 'blur' },
    { min: 3, max: 20, message: '密码长度为3-20个字符', trigger: 'blur' },
  ],
};

const formRef = ref(null);

// 提交表单
const submitForm = async () => {
  // 先校验表单
  console.log('提交表单' + UserDetail.userInfo.UserID);
  console.log('账号' + UserDetail.userInfo.UserAccount);
  formRef.value.validate(async (valid) => {
    if (!valid) {
      console.log('表单校验失败');
      return;
    }
    try {
      const response = await instance.post('/myinfo/userinfo', {
        id: UserDetail.userInfo.UserID,
        username: form.value.UserName,
        useraccount: form.value.UserAccount,
        userphone: form.value.UserPhone,
        password: form.value.UserPassword,
      }, {
        timeout: 10000
      });

      if (response.data.status === 0) {
        // 提交成功
        console.log('信息更新成功', response.data.message);
        UserDetail.userInfo.UserName = form.value.UserName;
        UserDetail.userInfo.UserAccount = form.value.UserAccount;
        UserDetail.userInfo.UserPhone = form.value.UserPhone;
        localStorage.setItem('userInfo', JSON.stringify(UserDetail.userInfo));
        ElMessage.success('用户信息更新成功！');
      } else {
        console.error('信息更新失败', response.data.message);
        ElMessage.error('用户信息更新失败，请稍后重试');
      }
    } catch (error) {
      console.error('请求出错：', error);
      ElMessage.error('系统异常，请稍后重试');
    }
  });
};

</script>

<style src="../assets/style/User.css" scoped></style>